<template>
    <div class="addMerchant">
        <div class="merchant-info">
            <ul>
                <el-form ref="ruleForm" :model="addMerchant" :inline="true" :rules="userRules" label-width="140px" >
                    <li>
                        <!-- <span>营业时间</span>
                            <el-time-picker
                                v-model="startTime"
                                value-format="H:mm:ss"
                                placeholder="任意时间点">
                            </el-time-picker>
                            <el-time-picker
                                arrow-control
                                v-model="endTime"
                                value-format="H:mm:ss"
                                placeholder="任意时间点">
                            </el-time-picker> -->
                        <el-form-item label="开始时间" prop="startTime">
                            <el-time-picker
                                v-model="addMerchant.startTime"
                                value-format="H:mm:ss"
                                placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                        <el-form-item label="结束时间" prop="endTime">
                            <el-time-picker
                                arrow-control
                                v-model="addMerchant.endTime"
                                value-format="H:mm:ss"
                                placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                        <!-- <el-form-item label="店铺名称" prop="shopName">
                            <el-input v-model="addMerchant.shopName" placeholder="请输入店铺名称" />
                        </el-form-item> -->
                    </li>
                    <li>
                        <!-- <span>站点负责人</span>
                    <input v-model='chargePersonName' type="text" placeholder="请输入店铺名称"> -->
                        <el-form-item label="站点负责人" prop="chargePersonName">
                            <el-input v-model="addMerchant.chargePersonName" placeholder="请输入姓名" />
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <span>负责人电话</span>
                    <input v-model='chargePersonPhone' type="text" placeholder="请输入店铺名称"> -->
                        <el-form-item label="负责人电话" prop="chargePersonPhone">
                            <el-input v-model="addMerchant.chargePersonPhone" placeholder="请输入电话" />
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <span>入驻状态</span>
                        <template>
                        <el-radio v-model="checkState" label=0>待审核</el-radio>
                        <el-radio v-model="checkState" label=1>同意入驻</el-radio>
                        <el-radio v-model="checkState" label=2>拒绝入驻</el-radio>
                        </template> -->
                        <el-form-item label="入驻状态" prop="checkState">
                            <template>
                                <el-radio v-model="addMerchant.checkState" label=0>待审核</el-radio>
                                <el-radio v-model="addMerchant.checkState" label=1>同意入驻</el-radio>
                                <el-radio v-model="addMerchant.checkState" label=2>拒绝入驻</el-radio>
                            </template>
                        </el-form-item>

                    </li>
                    <li>
                        <!-- <span>站点地址</span>
                        <template>
                            <el-select v-model="shopAdressProvince" placeholder="请选择">
                                <el-option
                                v-for="item in citydall"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                                </el-option>
                            </el-select>
                            <el-select v-if="shopAdressProvince" v-model="shopAdressCity" placeholder="请选择">
                                <el-option
                                v-for="item in citydall2"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                                </el-option>
                            </el-select>
                            <el-select v-if="shopAdressCity" v-model="shopAdress" placeholder="请选择">
                                <el-option
                                v-for="item in citydall3"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                                </el-option>
                            </el-select>
                        </template> -->
                        <el-form-item label="站点地址" prop="shopAdressProvince">
                            <template>
                                <el-select v-model="addMerchant.shopAdressProvince" placeholder="请选择">
                                    <el-option
                                    v-for="item in citydall"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name">
                                    </el-option>
                                </el-select>
                                <el-select v-if="addMerchant.shopAdressProvince" v-model="addMerchant.shopAdressCity" placeholder="请选择">
                                    <el-option
                                    v-for="item in citydall2"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name">
                                    </el-option>
                                </el-select>
                                <el-select v-if="addMerchant.shopAdressCity" v-model="addMerchant.shopAdress" placeholder="请选择">
                                    <el-option
                                    v-for="item in citydall3"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <span>详细地址</span>
                        <input v-model='shopAdressDetail' type="text" placeholder="请输入店铺名称"> -->
                        <el-form-item label="详细地址" prop="shopAdressDetail">
                            <el-input v-model="addMerchant.shopAdressDetail" placeholder="请输入详细地址" />
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <span>站点logo</span>
                        <el-upload
                            class="upload-demo"
                            action="uploadurl"
                            list-type="picture-card"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="1"
                            :on-exceed="handleExceed"
                            :before-upload="beforeUpload"
                            :http-request="uploadHttpLogo"
                            :file-list="fileList">
                            <i class="el-icon-plus"></i>
                        </el-upload> -->
                        <el-form-item label="站点logo" prop="shopLogo">
                            <el-upload
                                class="upload-demo"
                                action="uploadurl"
                                list-type="picture-card"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="1"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :http-request="uploadHttpLogo"
                                :file-list="fileList"
                                v-model="addMerchant.shopLogo">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <span>简介</span>
                        <input v-model='siteBrief' type="text" placeholder="请输入"> -->
                        <el-form-item label="简介" prop="siteBrief">
                            <el-input v-model="addMerchant.siteBrief" placeholder="请输入" />
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <span>站点名称</span>
                        <input v-model='siteName' type="text" placeholder="请输入"> -->
                        <el-form-item label="站点名称" prop="siteName">
                            <el-input v-model="addMerchant.siteName" placeholder="请输入" />
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <span>站点账号</span>
                        <input v-model='sitePhone' type="text" placeholder="请输入"> -->
                        <el-form-item label="站点账号" prop="sitePhone">
                            <el-input v-model="addMerchant.sitePhone" placeholder="请输入" />
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <span>是否启用</span>
                        <template>
                            <el-radio v-model="State" label=0>否</el-radio>
                            <el-radio v-model="State" label=1>是</el-radio>
                        </template> -->
                        <el-form-item label="是否启用" prop="State">
                            <template>
                                <el-radio v-model="addMerchant.State" label=0>否</el-radio>
                                <el-radio v-model="addMerchant.State" label=1>是</el-radio>
                            </template>
                        </el-form-item>
                    </li>
                </el-form>
            </ul>
        </div>
        <div class="content-bottom">
            <el-button type="primary" @click="sumbit('ruleForm')">确定</el-button>
            <el-button type="warning"  @click="cancelClick('ruleForm')">取消</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){    
        return{
            addMerchant: {
                startTime:'',
                endTime:'',
                chargePersonName:'',
                chargePersonPhone:'',
                checkState:'',
                shopAdressProvince:'',
                shopAdressCity:'',
                shopAdress:'',
                shopAdressDetail:'',
                shopLogo:'',
                siteBrief:'',
                siteName:'',
                sitePhone:'',
                State:'',
            },
            userRules: {
                startTime: [
                    { required: true, message: '请选择时间', trigger: 'blur' }
                ],
                endTime: [
                    { required: true, message: '请选择时间', trigger: 'blur' }
                ],
                chargePersonName: [
                    { required: true, message: '请输入负责人名字', trigger: 'blur' }
                ],
                chargePersonPhone: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' }
                ],
                checkState: [
                    { required: true, message: '请选择入驻状态', trigger: 'change' }
                ],
                shopAdressProvince: [
                    { required: true, message: '请选择站点地址', trigger: 'change' }
                ],
                shopAdressDetail: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ],
                shopLogo: [
                    { required: true, message: '请上传照片', trigger: 'blur' }
                ],
                siteBrief: [
                    { required: true, message: '请输入简介', trigger: 'blur' }
                ],
                siteName: [
                    { required: true, message: '请输入站点名称', trigger: 'blur' }
                ],
                sitePhone: [
                    { required: true, message: '请输入站点账号', trigger: 'blur' }
                ],
                State: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
            },
            // startTime: '',
            // endTime: '',
            //  chargePersonName:'',//店铺负责人
            //  chargePersonPhone:'',//联系方式
            //  checkState:'',
            //  shopAdress:'',//店铺地址
            //  shopAdressCity:'',
            //  shopAdressDetail:'',//详细地址
            //  shopAdressProvince:'',
            //  shopLogo:'',
            //  siteBrief:'',
            //  siteName:'',
            //  sitePhone:'',
            //  State:'',
            adcode:'',
            businessTime:'',
            citycode:'',
            fileList:[],
            fileUpUrlList:'',
            isLt2M:'',
            value:'',
            citydall:'',
            citydall2:'',
            citydall3:'',
            value1:'',
            value2:'',
            value3:''

        }
    },
    mounted(){
            this.axios({
                url: "/site/getAllRegion",
                method: "get",
            }).then((res) => {
                 this.citydall=res.data.data
            });
    },
    methods:{
         //删除图片
        handleRemove(file, fileList) {
        },
        handlePreview(file) {
            console.log(file);
        },
        //提示上传文件个数
        handleExceed(files, fileList) {
            console.log(files)
            this.$message.warning("只能上传一个文件，请先删除，再上传新文件！");
        },
        //删除提示
        beforeRemove(file, fileList) {
            if(!this.isLt2M){
                return this.$alert('只能上传jpg/png文件，且不超过300kb', '图片上传限制', {confirmButtonText: '确定',});
            }
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //提示上传文件大小
        beforeUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 0.3;
            this.isLt2M=isLt2M
            console.log(file.size,isLt2M)
            if (!isLt2M) {
                // this.common.errorTip('上传文件大小不能超过 2MB!');
                // this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        uploadHttpLogo(params){
            var  formData = new FormData();
            formData.append('file', params.file);
            this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                this.addMerchant.shopLogo=res.data.data
                console.log('4444444444444444444444',this.addMerchant.shopLogo)
            })
        },
          handleChange(value) {
                console.log(value);
            },
        uploadHttp(){},
        // fileList(){},
        // 取消
        cancelClick(ruleForm){
            this.$router.push('/index/headList')
        },
        sumbit(ruleForm){
            var Obj = {
                shopLogo:this.addMerchant.shopLogo.url,
                adcode:this.addMerchant.adcode,
                businessTime:this.addMerchant.startTime+"-"+this.addMerchant.endTime,
                chargePersonName:this.addMerchant.chargePersonName,
                chargePersonPhone:this.addMerchant.chargePersonPhone,
                checkState:this.addMerchant.checkState,
                citycode:this.addMerchant.citycode,
                shopAdressProvince:this.addMerchant.shopAdressProvince,
                shopAdressCity:this.addMerchant.shopAdressCity,
                shopAdress:this.addMerchant.shopAdress,
                shopAdressDetail:this.addMerchant.shopAdressDetail,
                siteBrief:this.addMerchant.siteBrief,
                siteName:this.addMerchant.siteName,
                sitePhone:this.addMerchant.sitePhone,
                State:this.addMerchant.State
            };
            this.$refs[ruleForm].validate(valid => {
                if(valid) {
                    console.log(this.addMerchant.shopAdressProvince,'this.addMerchant.shopAdressProvince')
                    this.axios({
                        url: "/site/insertPlatformSite",
                        method: "post",
                        data:Obj,
                    }).then((res) => {
                    alert(res.data.code)
                        this.fileUpUrlList=''
                    });
                }
            })
        },
    },
    watch:{
        'addMerchant.shopAdressProvince'(){
            this.value2=''
            this.citydall.forEach(e => {
                if(e.name==this.addMerchant.shopAdressProvince){
                    this.citydall2=e.regions
                }
            });
            console.log(this.addMerchant.shopAdressProvince,this.citydall2)
        },
        'addMerchant.shopAdressCity'(){
            this.shopAdress=''
            this.citydall2.forEach(e => {
                if(e.name==this.addMerchant.shopAdressCity){
                    this.citydall3=e.regions
                     this.citycode=e.id
                }
            });
            console.log(this.addMerchant.shopAdressCity,this.citydall3)
        },
        'addMerchant.shopAdress'(){
            this.citydall3.forEach(e => {
                if(e.name==this.addMerchant.shopAdress){
                    this.adcode=e.id
                }
            });
        }
    }
}
</script>

<style scoped>
    .addMerchant{
        position: relative;
    }
    .merchant-info ul li{
        margin-top: 15px;
        display: flex;
        align-items: center;
    }
    .merchant-info ul li span{
        display: inline-block;
        margin-right: 20px;
        width: 120px;
        text-align: right;
    }
    
   #go-back{
        width: 60px;
        padding: 7px;
        text-align: center;
        margin-left: 64px;
   }
    /* 合同状态 */
   label input{
       height: 12px;
   }

   /* 上传按钮 */
   .upload-demo{
       display: inline-block;
   }
   .my-btn:hover{
       cursor: pointer;
   }
   .content-bottom{
       margin:40px 0 0 140px
   }
</style>